<template>
  <div>
    <ElHeader></ElHeader>
    <el-container>
      <div class="bgi">
        <img width="100%" src="http://www.yhachina.com/images/exhibition/exhibition-banner.jpg" alt="" />
        <div class="text">
          <span>关于YHA<font style="vertical-align: super; font-size: 50%">®</font>青年旅舍<font
              style="vertical-align: super; font-size: 50%">®</font></span>
          <span>国际青年旅舍<font style="vertical-align: super; font-size: 50%">®</font>
            不是经济型酒店，我们提倡：文化交流，社会责任，实践环保，爱护大自然，简朴而高素质生活，自助及助人。</span>
        </div>
      </div>
      <div class="main">
        <div class="content">
          <div class="chead">
            <img src="http://www.yhachina.com/images/exhibition/exhibition-l-iten1.jpg" alt="" />
            <div>
              <span>YHA<font style="vertical-align: super; font-size: 50%">®</font>青年旅舍<font
                  style="vertical-align: super; font-size: 50%">®</font>简介</span>
              <el-link href="" :underline="false" class="bold"><i class="el-icon-document"></i> 青年旅社的来由</el-link>
              <el-link href="" :underline="false" class="bold"><i class="el-icon-document"></i> 品牌理念</el-link>
            </div>
          </div>
          <div class="foot">
            <div>
              <img src="http://www.yhachina.com/images/exhibition/exhibition-l-iten2.jpg" alt="" />
              <div>
                <span>YHA<font style="vertical-align: super; font-size: 50%">®</font>青年旅舍<font
                    style="vertical-align: super; font-size: 50%">®</font>简介</span>
                <el-link href="" :underline="false" class="bold"><i class="el-icon-document"></i>
                  中国国际青年旅舍概况</el-link>
              </div>
            </div>
            <div>
              <img src="http://www.yhachina.com/images/exhibition/exhibition-l-iten3.jpg" alt="" />
              <div>
                <span>YHA<font style="vertical-align: super; font-size: 50%">®</font>青年旅舍<font
                    style="vertical-align: super; font-size: 50%">®</font>简介</span>
                <el-link href="" :underline="false" class="bold"><i class="el-icon-document"></i> 海外青年旅社概况</el-link>
              </div>
            </div>
          </div>
        </div>
        <div class="aside">
          <el-link href="" :underline="false" class="contact1">
            <div class="iii">
              <svg t="1669692108818" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3225" width="30" height="30">
                <path
                  d="M640 896h192V469.376h42.666667V896.213333c0 23.466667-19.029333 42.474667-42.666667 42.474667H597.333333V725.333333h-170.666666v213.333334H192c-23.573333 0-42.666667-18.986667-42.666667-42.453334V469.354667h42.666667V896h192V682.666667h256v213.333333z"
                  fill="#fff" p-id="3226"></path>
                <path
                  d="M100.032 506.133333a21.333333 21.333333 0 1 1-29.397333-30.933333L466.282667 99.349333a66.688 66.688 0 0 1 91.434666 0L953.386667 475.2a21.333333 21.333333 0 1 1-29.397334 30.933333L528.341333 130.282667a24.021333 24.021333 0 0 0-32.682666 0L100.053333 506.133333zM832 192h-128a21.333333 21.333333 0 0 1 0-42.666667h149.333333a21.333333 21.333333 0 0 1 21.333334 21.333334v149.333333a21.333333 21.333333 0 0 1-42.666667 0V192z"
                  fill="#fff" p-id="3227"></path>
              </svg>&nbsp;&nbsp;旅社预定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-link>

          <el-link href="" :underline="false" class="contact2">
            <div class="iii">
              <svg t="1669693293666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5351" width="30" height="30">
                <path
                  d="M915.184177 518.571672c11.766998 0 21.310352-9.561773 21.310352-21.327748L936.494529 265.848811c0-44.770669-36.261878-81.033571-81.027431-81.033571L161.908018 184.815239c-44.768623 0-81.030501 36.262902-81.030501 81.033571l0 490.908636c0 44.769646 36.262902 81.005942 81.030501 81.005942L855.467097 837.763388c44.765553 0 81.027431-36.236296 81.027431-81.005942l0-67.518766c-0.066515-11.721973-9.565866-21.219277-21.310352-21.219277-11.737322 0-21.284769 9.497305-21.323655 21.219277l0 0.044002c0 0.042979 0 0.042979 0 0.085958l0 63.123666c0 23.571858-19.132756 42.659589-42.662659 42.659589l-407.951249 0c-0.020466 0-0.020466 0-0.047072 0L166.177252 795.151895c-23.528879 0-42.662659-19.087731-42.662659-42.659589L123.514593 423.071621l770.346953 0 0 74.172303C893.860523 509.010923 903.397736 518.571672 915.184177 518.571672zM123.51357 270.114974c0-23.553439 19.133779-42.660612 42.662659-42.660612l685.020612 0c23.529903 0 42.662659 19.107173 42.662659 42.660612l0 27.287483L123.51357 297.402457 123.51357 270.114974zM123.51357 380.435569l0-40.395012 770.346953 0 0 40.395012L123.51357 380.435569zM760.290411 632.263038l0 131.090641 20.411889 0L780.7023 714.096834l33.20117 0c31.881105-0.441045 48.068785-14.470573 48.50983-42.208311-1.696642-25.136493-17.216103-38.32998-46.579875-39.626509L760.290411 632.262014zM841.366961 672.569022c-0.440022 16.621563-10.467399 25.12319-29.995151 25.560142l-30.66951 0 0-49.881061 30.66951 0C830.505589 648.666636 840.467475 656.802944 841.366961 672.569022zM726.823182 763.353678 726.823182 632.263038l-19.768229 0 0 131.090641L726.823182 763.353678zM242.784 728.741369l0-77.834716-77.708849 0 0 77.834716L242.784 728.741369zM623.183753 746.070037c-0.855484-1.717108-14.904455-39.625486-42.154076-113.808022l-21.660322 0 52.317553 131.090641 22.340821 0 52.353368-131.090641-22.358217 0c-26.368554 73.741491-39.785122 111.648846-40.178071 113.808022L623.183753 746.070037z"
                  p-id="5352" fill="#ffffff"></path>
              </svg>&nbsp;&nbsp;会员卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
                class="el-icon-arrow-right"></i>
            </div>
          </el-link>

          <el-link href="" :underline="false" class="contact3">
            <div class="iii">
              <svg t="1669692664663" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4485" width="30" height="30">
                <path
                  d="M510.4 922h-220c-65.6 0-119-50.5-119-112.6V555.7c0-22.7 18.4-41.2 41.2-41.2s41.2 18.4 41.2 41.2v253.6c0 16.7 16.4 30.2 36.6 30.2h220c22.7 0 41.2 18.4 41.2 41.2S533.1 922 510.4 922z"
                  fill="#fff" p-id="4486"></path>
                <path
                  d="M514 608.5c-43.6 0-85.3-14.4-117.9-39.9-44.3 31.6-102.6 43.1-158.2 29.4-43.1-10.5-80.6-35.2-105.5-69.6-30.1-41.3-39.3-92.9-25.2-141.4l48.2-201.3c15.3-52.3 64.3-87.4 119.7-87.4h463c51 0 97.5 30.2 115.6 75.2 0.4 1 0.8 2.1 1.1 3.1L906.1 341c27.6 80 19.1 144.9-25.7 191.7-13 13.8-28.7 25.6-46.7 35.1-61.1 32.3-136.1 28.4-192.6-6.9-33.6 30.3-78.7 47.6-127.1 47.6zM397.4 470.7h1c12.5 0.3 24.2 6.3 31.7 16.2 18.7 24.5 50 39.2 83.8 39.2 36 0 69.5-17 87.4-44.4 2-3.1 4.4-5.8 7.1-8.2 14.6-13.2 40.7-13.2 55.3 0 0.8 0.7 1.6 1.5 2.4 2.3 32.1 33.7 86.4 41.7 129.1 19.1 10.1-5.3 18.6-11.7 25.4-18.9l0.3-0.3c14.1-14.7 30.2-42 7-109.1l-51.1-163.8c-6-13.4-21.4-22.3-38.6-22.3h-463c-18.8 0-35.6 11-40.1 26.2l-48.2 201.2c-7.6 26.1-3 51 12.3 71.9 13.5 18.7 34.1 32.1 58.4 38 40.7 10.1 83.2-2.8 108.4-32.7 7.7-9 19.3-14.4 31.4-14.4zM880.7 828.3H694.6c-22.7 0-41.2-18.4-41.2-41.2s18.4-41.2 41.2-41.2h186.1c22.7 0 41.2 18.4 41.2 41.2s-18.4 41.2-41.2 41.2z"
                  fill="#fff" p-id="4487"></path>
                <path
                  d="M787.7 921.3c-22.7 0-41.2-18.4-41.2-41.2V694c0-22.7 18.4-41.2 41.2-41.2s41.2 18.4 41.2 41.2v186.1c0 22.8-18.5 41.2-41.2 41.2z"
                  fill="#fff" p-id="4488"></path>
              </svg>&nbsp;&nbsp;旅社加盟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
            </div>
          </el-link>
          <div class="nbsp">&nbsp;</div>
          <div class="gfxd">
            <a href="">
              <img src="http://www.yhachina.com/data/images/2020-08-19/5f3cb08134015.jpg" alt="" />
            </a>
          </div>
        </div>
      </div>
    </el-container>
    <ElFooter></ElFooter>
  </div>
</template>

<script>
import ElFooter from '@/components/ElFooter.vue'
import ElHeader from '@/components/ElHeader.vue'
export default {
  components: { ElFooter, ElHeader },
}
</script>

<style lang="scss" scoped>
.headerspan {
  position: relative;
  // margin-right: 10px;
  right: 0;
  width: 600px;

  div:nth-child(1) {
    position: absolute;
    top: 5px;
    height: 35px;
    right: 0;
    width: 250px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .little {
      font-weight: 300;
      font-size: 12px;
    }
  }

  div:nth-child(2) {
    position: absolute;
    width: 600px;
    right: 0;
    top: 35px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .bold {
      font-weight: bold;
      color: black;
    }
  }
}

.el-container {
  display: flex;
  flex-direction: column;
  flex: none;
  margin-bottom: 50px;
}

.bgi {
  padding: 0;
  margin: 30px 0 0 0;
  width: 100%;

  .img {
    width: 1021px;
  }

  .text {
    background-color: white;
    width: 1080px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    bottom: 60px;
    padding: 30px;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
    span:nth-child(1) {
      display: block;
      font-size: 30px;
      font-weight: 1.5rem;
    }

    span:nth-child(2) {
      display: block;
      font-size: 15px;
      padding: 5px 0;
    }
  }
}

.header {
  width: 1300px;
  margin: 0 auto;
}

.main {
  width: 1080px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;

  .content {
    width: 810px;
    border-radius: 8px;

    // background-color: red;
    >.chead {
      position: relative;

      >img {
        width: calc(100% + 10px);
        display: block;
        border-radius: 8px;
      }

      >div {
        background-color: #87c524;
        position: absolute;
        width: 100%;
        bottom: 0px;
        padding: 5px;
        border-radius: 8px;
        color: #fff;

        >span {
          display: block;
          font-size: 20px;
          font-weight: bold;
        }

        .bold {
          // font-weight: bold;
          color: #fff;
          padding: 0 10px;
        }
      }
    }

    >.foot {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      >div:nth-child(1) {
        position: relative;

        img {
        width: calc(100% + 10px);
          border-radius: 8px;
          display: block;
        }

        >div {
          background-color: rgb(237, 149, 31);
          color: #fff;
          position: absolute;
          bottom: 0px;
          width: 100%;
          padding: 5px;
          border-radius: 8px;

          >span {
            display: block;
            font-size: 20px;
          }

          .bold {
            color: #fff;
            padding: 0 10px;
          }
        }
      }

      >div:nth-child(2) {
        position: relative;

        img {
          width: calc(100% + 10px);
          display: block;
          border-radius: 8px;
        }

        >div {
          background-color: #4b87be;
          color: #fff;
          position: absolute;
          bottom: 0px;
          width: 100%;
          padding: 5px;
          border-radius: 8px;

          >span {
            display: block;
            font-size: 20px;
          }

          .bold {
            color: #fff;
            padding: 0 10px;
          }
        }
      }
    }
  }

  .aside {
    width: 240px;

    .iii {
      display: flex;
      justify-content: space-between;

      svg {
        font-size: 30px;
        height: 30px;
        line-height: 30px;
      }

      i {
        font-size: 30px;
        height: 30px;
        line-height: 30px;
      }
    }

    .contact1 {
      font-size: 23px;
      height: 30px;
      line-height: 30px;
      background-color: #87c524;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
    }

    .contact2 {
      font-size: 23px;
      height: 30px;
      background-color: #f7941c;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
      margin: 1px 0;
    }

    .contact3 {
      font-size: 23px;
      height: 30px;
      background-color: #4b8fcc;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      width: 240px;
      color: white;
      font-weight: bold;
    }

    .nbsp {
      height: 21px;
    }

    .gfxd {
      img {
        width: 280px;
        border: none;
      }
    }
  }
}

.el-footer {
  padding: 0;
  margin-top: 50px;
}

.footer {
  background: #282a2b;
  height: 300px;
  width: 100%;

  .footerhead {
    width: 100%;
    margin: 0 auto;
    margin-bottom: -24px;
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    line-height: 50px;

    .bold {
      color: white;
    }
  }

  .footerbody {
    width: 900px;
    margin: 0 auto;
    position: relative;

    .yi {
      position: absolute;
      right: 0;
      color: #696a6b;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      text-align: right;
      height: 40px;
    }

    .er {
      position: absolute;
      right: 0;
      top: 45px;
    }

    .san {
      position: absolute;
      right: 0;
      top: 90px;
      color: #696a6b;
      font-size: 12px;
      width: 250px;
      display: flex;
      justify-content: space-between;

      .wo {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }

    .si {
      position: absolute;
      right: 0;
      top: 130px;
      height: 20px;
      line-height: 20px;
      display: flex;
      width: 500px;
      justify-content: space-between;

      span {
        font-size: 12px;
        line-height: 12px;
        color: #696a6b;
      }

      .ni {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }
  }
}
</style>
